Sakura Bliss

https://gyazo.com/c2ad03692cd8c27b2d944d7123ea7309

ソース解析

code:define

code: mainImage()

void mainImage( out vec4 fragColor, in vec2 fragCoord ){

// Normalized pixel coordinates (from 0 to 1)

/*

fragCorrdにはピクセル座標が入ってる模様。 画面サイズで割って正規化する

*/

vec2 nominalUV = fragCoord/iResolution.xy;

/*

アスペクト比を1:1に変換、横長の場合Xが1を超える形になる

*/

vec2 uv = nominalUV - 0.5;

uv.x *= iResolution.x / iResolution.y;

// Scroll the UV with a cosine oscillation

/*

全体を左右に振動させたり下に動かしたり、カメラが移動しているイメージ

*/

uv.y += iTime * 0.1;

uv.x -= iTime * 0.03 + sin(iTime) * 0.1;

/*

拡大率を変更（数字を増やすと縮小、数字を減らすと拡大

カメラの解像度が上がるイメージ

*/

uv *= 4.3;

//Compute a BG gradient

/*

背景グラデーションの色を決定

UVのY方向に対して水色から白へ線形補間

*/

float screenY = nominalUV.y;

vec3 col = mix(vec3(0.3, 0.3, 1.0), vec3(1.0, 1.0, 1.0), screenY); // mix()はHLSLで言うleap()の事

// Compute a tilt-shift-like blur factor

/*

チルトシフト風のブラー係数を算出

UVのY方向に対して0.15〜0〜0.15になるような値

*/

float blur = abs(nominalUV.y - 0.5) * 2.0;

blur *= blur * 0.15;

// Computes several layers with various degrees of blur and scale

/*

レイヤー毎の桜パーティクルの生成。

それぞれのlayreには、各レイヤーにおける色が入ってる

レイヤー2、レイヤー3はUVのY軸に対して乗算する（暗くなる）

*/

vec4 layer1 = layer(uv, 0.015 + blur);

vec4 layer2 = layer(uv * 1.5 + vec2(124.5, 89.30), 0.05 + blur);

layer2.rgb *= mix(0.7, 0.95, screenY);

vec4 layer3 = layer(uv * 2.3 + vec2(463.5, -987.30), 0.08 + blur);

layer3.rgb *= mix(0.55, 0.85, screenY);

// Blend it all together

col = premulMix(layer3, col);

col = premulMix(layer2, col);

col = premulMix(layer1, col);

// Adds some light at the to of the screen

col += vec3(nominalUV.y * nominalUV.y) * 0.2;

// Output to screen

fragColor = vec4(col,1.0);

}

code:premulMix

// blends a pre-multiplied src onto a dst color (without alpha)

/*

「あらかじめ乗算されたsrcをdst色にブレンドします」

と書いてるけど、ただのアルファブレンドに見える・・・

src側がすでに src.rgb * src.a してるってこと？

*/

vec3 premulMix(vec4 src, vec3 dst)

{

return dst.rgb * (1.0 - src.a) + src.rgb;

}

// blends a pre-multiplied src onto a dst color (with alpha)

vec4 premulMix(vec4 src, vec4 dst)

{

vec4 res;

res.rgb = premulMix(src, dst.rgb);

res.a = 1.0 - (1.0 - src.a) * (1.0 - dst.a);

return res;

}

code:layer

// Computes a Layer of flowers

vec4 layer(vec2 uv, float blur)

{

/*

UVをグリッドに分ける

cellUVは中央原点に補正

*/

vec2 cellUV = fract(uv) - 0.5;

vec2 cellId = floor(uv);

// 出力色

vec4 accum = vec4(0.0);

// the flowers can overlap on the 9 neighboring cells so we blend them all together on each cell

/*

「花は隣接する9つのセルで重なり合うため、各セルでそれらをすべてブレンドします。」

？？？？

*/

for (float y = -1.0; y <= 1.0; y++)

{

for (float x = -1.0; x <= 1.0; x++)

{

vec2 offset = vec2(x, y); // (-1,-1)〜(1,1)空間

/*

sakuraに渡す引数

uv: 各隣接セル毎のUV空間（0~1空間）

id: 各セルのID（入力UVの整数部）

blur: チルトシフト風ブラーの係数

*/

vec4 sakura = sakura(cellUV - offset, cellId + offset, blur);

accum = premulMix(sakura, accum);

}

}

return accum;

}

code:sakura

// Computes the RGB and alpha of a single flower in its own UV space

/*

「独自のUV空間で単一の花のRGBとアルファを計算します」

*/

vec4 sakura(vec2 uv, vec2 id, float blur)

{

//time is offset to avoid the flowers to be aligned at start

/*

開始時に花が整列しないように時間をオフセットします

*/

float time = iTime + 45.0;

//get 4 random numbersper flower

/*

ランダム値の作成をする。

入力値がid由来なので、同一idのセルは同じ値を返す

*/

vec4 rnd = N14(id.x * 5.4 + id.y * 13.67);

// Offset the flower form the center in a random Lissajous pattern

/*

ランダムなリサージュパターンで中心から花をオフセットします。

*/

uv *= mix(0.75, 1.3, rnd.y); // 花のサイズをランダムにする

uv.x += sin(time * rnd.z * 0.3) * 0.6; // 花の位置をランダムにする

uv.y += sin(time * rnd.w * 0.45) * 0.4;

// Computes the angle of the flower with a random rotation speed

/*

ランダムな回転速度で花の角度を計算します

ランダム値は同一IDで同じ値が使われる

*/

float angle = atan(uv.y, uv.x) + rnd.x * 421.47 + iTime * mix(-0.6, 0.6, rnd.x);

// euclidean distance to the center of the flower

/*

花の中心までのユークリッド距離

*/

float dist = length(uv); // lengthはベクトルの長さ(sqrt(x*x+y*y)を返す。まじかよ

// Flower shaped distance function form the center

/*

「花の形をした距離関数は中心から」

花びらを描くための距離関数。詳細は下のpetalメモで。

花の絵を極座標系で描いてる

angleを2.5倍してるのがキモで、ここのおかげで5枚の花びらになってる。

*/

float petal = 1.0 - abs(sin(angle * 2.5)); // *1

float sqPetal = petal * petal; // *2

petal = mix(petal, sqPetal, 0.7); // *3

float petal2 = 1.0 - abs(sin(angle * 2.5 + 1.5)); // *4 位相した波形を合成して凹みを付ける

petal += petal2 * 0.2; // *5

float sakuraDist = dist + petal * 0.25;

// Compute a blurry shadow mask.

/*

ぼやけたシャドウマスクを計算する

*/

float shadowblur = 0.3;

float shadow = S(0.5 + shadowblur, 0.5 - shadowblur, sakuraDist) * 0.4;

//Computes the sharper mask of the flower

/*

花のよりシャープなマスクを計算します

アルファ値に使う

*/

float sakuraMask = S(0.5 + blur, 0.5 - blur, sakuraDist);

// The flower has a pink hue and is lighter in the center

/*

花はピンク色をしていて、中央が明るい

*/

vec3 sakuraCol = vec3(1.0, 0.6, 0.7);

sakuraCol += (0.5 - dist) * 0.2;

// Computes the border mask of the flower

/*

花のボーダーマスクを計算します

*/

vec3 outlineCol = vec3(1.0, 0.3, 0.3);

float outlineMask = S(0.5 - blur, 0.5, sakuraDist + 0.045);

// Defines a tiling polarspace for the pistil pattern

/*

雌しべパターンのタイリング極空間を定義します

*/

float polarSpace = angle * 1.9098 + 0.5;

float polarPistil = fract(polarSpace) - 0.5; // 12 / (2 * pi)

// Round dot in the center

outlineMask += S(0.035 + blur, 0.035 - blur, dist);

float petalBlur = blur * 2.0;

float pistilMask = S(0.12 + blur, 0.12, dist) * S(0.05, 0.05 + blur , dist);

// Compute the pistil 'bars' in polar space

float barW = 0.2 - dist * 0.7;

float pistilBar = S(-barW, -barW + petalBlur, polarPistil) * S(barW + petalBlur, barW, polarPistil);

// Compute the little dots in polar space

float pistilDotLen = length(vec2(polarPistil * 0.10, dist) - vec2(0, 0.16)) * 9.0;

float pistilDot = S(0.1 + petalBlur, 0.1 - petalBlur, pistilDotLen);

//combines the middle an border color

outlineMask += pistilMask * pistilBar + pistilDot;

sakuraCol = mix(sakuraCol, outlineCol, sat(outlineMask) * 0.5);

//sets the background to the shadow color

sakuraCol = mix(vec3(0.2, 0.2, 0.8) * shadow, sakuraCol, sakuraMask);

//incorporates the shadow mask into alpha channel

sakuraMask = sat(sakuraMask + shadow);

//returns the flower in pre-multiplied rgba

return vec4(sakuraCol, sakuraMask);

}

petalメモ

petal *1 を縦にpetal、横にAngleで引いた図

なんか勘違いしてる気がしなくもない

petal *2

https://gyazo.com/36bbb13634a4f79facdd10d565550f49